<template>
	<view class="">
		<view class="u-navbar" :style="[navbarStyle]" :class="{ 'u-navbar-fixed': isFixed, 'u-border-bottom': borderBottom }">
			<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="u-navbar-inner" :style="[navbarInnerStyle]">
				<view class="u-back-wrap" v-if="isBack" @tap="goBack">
					<view class="u-icon-wrap">
						<u-icon :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon>
					</view>
					<view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">{{ backText }}</view>
				</view>
				<view class="u-navbar-content-title" v-if="title" :style="[titleStyle]">
					<view
					    class="u-title u-line-1"
					    :style="{
							color: titleColor,
							fontSize: titleSize + 'rpx',
							fontWeight: titleBold ? 'bold' : 'normal'
						}">
						{{ title }}
					</view>
				</view>
				<view class="u-slot-content">
					<slot></slot>
				</view>
				<view class="u-slot-right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<!-- 解决fixed定位后导航栏塌陷的问题 -->
		<view class="u-navbar-placeholder" v-if="isFixed && !immersive" :style="{ width: '100%', height: Number(navbarHeight) + statusBarHeight + 'px' }"></view>
	</view>
</template>

<script>
	
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	
	export default {
		name: "u-navbar",
		props: {
			
			height: {
				type: [String, Number],
				default: ''
			},
			
			backIconColor: {
				type: String,
				default: '#606266'
			},
			
			backIconName: {
				type: String,
				default: 'nav-back'
			},
			
			backIconSize: {
				type: [String, Number],
				default: '44'
			},
			
			backText: {
				type: String,
				default: ''
			},
			
			backTextStyle: {
				type: Object,
				default () {
					return {
						color: '#606266'
					}
				}
			},
			
			title: {
				type: String,
				default: ''
			},
			
			titleWidth: {
				type: [String, Number],
				default: '250'
			},
			
			titleColor: {
				type: String,
				default: '#606266'
			},
			
			titleBold: {
				type: Boolean,
				default: false
			},
			
			titleSize: {
				type: [String, Number],
				default: 32
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			
			background: {
				type: Object,
				default () {
					return {
						background: '#ffffff'
					}
				}
			},
			
			isFixed: {
				type: Boolean,
				default: true
			},
			
			immersive: {
				type: Boolean,
				default: false
			},
			
			borderBottom: {
				type: Boolean,
				default: true
			},
			zIndex: {
				type: [String, Number],
				default: ''
			},
			
			customBack: {
				type: Function,
				default: null
			}
		},
		data() {
			return {
				menuButtonInfo: menuButtonInfo,
				statusBarHeight: systemInfo.statusBarHeight
			};
		},
		computed: {
			
			navbarInnerStyle() {
				let style = {};
				
				style.height = this.navbarHeight + 'px';
				
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				return style;
			},
			
			navbarStyle() {
				let style = {};
				style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
				
				Object.assign(style, this.background);
				return style;
			},
			
			titleStyle() {
				let style = {};
				// #ifndef MP
				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
				style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
				// #endif
				// #ifdef MP
				
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
				style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth +
					'px';
				// #endif
				style.width = uni.upx2px(this.titleWidth) + 'px';
				return style;
			},
			
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return this.height ? this.height : 44;
				// #endif
				// #ifdef MP
				
				
				
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return this.height ? this.height : height;
				// #endif
			}
		},
		created() {},
		methods: {
			goBack() {
				
				if (typeof this.customBack === 'function') {
					
					
					this.customBack.bind(this.$u.$parent.call(this))();
				} else {
					uni.navigateBack();
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	@import "../../libs/css/style.components.scss";

	.u-navbar {
		width: 100%;
	}

	.u-navbar-fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 991;
	}

	.u-status-bar {
		width: 100%;
	}

	.u-navbar-inner {
		@include vue-flex;
		justify-content: space-between;
		position: relative;
		align-items: center;
	}

	.u-back-wrap {
		@include vue-flex;
		align-items: center;
		flex: 1;
		flex-grow: 0;
		padding: 14rpx 14rpx 14rpx 24rpx;
	}

	.u-back-text {
		padding-left: 4rpx;
		font-size: 30rpx;
	}

	.u-navbar-content-title {
		@include vue-flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		position: absolute;
		left: 0;
		right: 0;
		height: 60rpx;
		text-align: center;
		flex-shrink: 0;
	}

	.u-navbar-centent-slot {
		flex: 1;
	}

	.u-title {
		line-height: 60rpx;
		font-size: 32rpx;
		flex: 1;
	}

	.u-navbar-right {
		flex: 1;
		@include vue-flex;
		align-items: center;
		justify-content: flex-end;
	}

	.u-slot-content {
		flex: 1;
		@include vue-flex;
		align-items: center;
	}
</style>
